import styled from 'styled-components'

interface IMenuWrapper {
  isCollapsed: boolean
}

export const MenuWrapper = styled.div<IMenuWrapper>`
  //&::-webkit-scrollbar {
  //  display: none;
  //}
  height: 100%;
  overflow-y: hidden;

  .ant-menu-root {
    height: calc(100vh - 46px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .header {
    display: flex;
    align-items: center;
    padding: 16px 16px 0 24px;
    margin-top: 0;
    //单行文本溢出
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .logo {
      width: 30px;
      height: 30px;
      margin-right: 5px;
    }

    .title {
      display: ${(props) => (props.isCollapsed ? 'none' : 'inline')};
      transition: all 1s ease;
    }
  }

  .ant-menu-light.ant-menu-root.ant-menu-inline,
  .ant-menu-light.ant-menu-root.ant-menu-vertical {
    border-inline-end: none;
  }
`
